<template>
	<!-- 页面全局配置 -->
	<view class="pageconfig">
		<!--vuetop-->
		<view class="flex1   response  flex flex-wrap justify-start  " style="align-items: center;">
			<view class="flex2  flex-sub   flex flex-wrap justify-start  " style="flex-direction: column;">
				<text class="text3 text-bold "> 课程学习</text>
			</view>
		</view>
		<view class="flex4   response  flex flex-wrap justify-center  ">
			<view class="flex5   response  flex flex-wrap justify-between  " v-for="(item,index) in abu_theme_list"
				@click="to_study_info(item)" style="flex-direction: row;align-items: center;">
				<image v-if="item&&item.cover" class="picture6 radius  radius"
					style="width:322rpx;height:228rpx;min-height:unset;" :src="item.cover.path"></image>
				<view class="flex7  flex-sub   flex flex-wrap justify-start  "
					style="flex-direction: column;align-content: space-between;">
					<text class="text8 response "> {{item.theme}}</text>
					<view class="flex9   response  flex flex-wrap justify-between  " style="align-items: center;">
						<text class="text-gray "> </text>
						<view class="flex11    flex flex-wrap justify-start  " style="align-items: center;">
							<text class="text12 round bg-yellow "> {{item.study_status?"已加入学习":"学习"}}</text>
						</view>
					</view>
					<text class="text8 response "> 已学习次数:{{item.count}}</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import Vue from 'vue'

	const db = uniCloud.database()
	let abu_theme_db = db.collection('abu-theme-study');
	export default {
		data() {
			return {
				abu_theme_list: [],
				picsrc6: "https://via.placeholder.com/400x200.png/3c9cff/fff",
			};
		},
		async onLoad() {
			uni.showLoading({
				title: '加载中',
				mask: false
			});
			await this.load_data()
			uni.hideLoading()
		},
		methods: {
			async load_data() {
				try {
					const res_user_info = await uniCloud.getCurrentUserInfo();
					const res = await abu_theme_db.get();

					// 使用 Promise.all 来等待所有异步映射操作的完成
					this.abu_theme_list = await Promise.all(res.result.data.map(async (item) => {
						let study_status = false;

						// 查询学习日志
						const re_log = await db.collection("abu-study-log").where({
							member_id: res_user_info.uid,
							education_id: item._id
						}).get();

						// 检查 re_log 数据
						if (re_log && re_log.result && re_log.result.data && re_log.result.data
							.length > 0) {
							study_status = true;
						}

						// 返回包含学习状态的项
						return {
							...item,
							study_status
						};
					}));

					console.log(this.abu_theme_list);
				} catch (error) {
					console.error("Error:", error);
					// 根据需要进行错误处理
				}
			},
			to_study_info(item) {
				uni.navigateTo({
					url: "/pages/study/study_info?id=" + item._id
				})
			}
		}
	}
</script>

<style lang="less">
	.pageconfig {
		width: 100%;
		overflow: hidden;
		overflow-y: scroll;
		height: 100vh;
	}



	/**pagedomcss**/


	.flex1 {
		width: 100%;
		background-color: #ffffff;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex2 {
		width: 69%;
		flex: 1;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text3 {
		font-size: 36rpx;
	}

	.flex4 {
		width: 100%;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex5 {
		width: 100%;
		background-color: #ffffff;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 0rpx;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.picture6 {
		width: 100%;
		height: 228rpx;
	}

	.flex7 {
		width: 39%;
		flex: 1;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text8 {
		width: 100%;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 0rpx;
	}

	.flex9 {
		width: 100%;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex11 {
		position: relative;
	}

	.text12 {
		color: #515a6e;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
</style>